/**
  * @Description: 去审批
  * @author zhangxia
  */

<template>
    <div class="approval-wrap">
      <div class="approval-inner">
        <div class="approval-result" v-if="isChangeRadio">
          <div class="result-title">
            <span>*</span>
            <span>审批结果：</span>
          </div>
          <div class="result-radio-wrap">
            <van-radio-group v-model="radio" direction="horizontal">
              <van-radio name="2">同意</van-radio>
              <van-radio name="1">拒绝</van-radio>
            </van-radio-group>
          </div>
        </div>

        <div class="approval-determine">
          <div class="determine-title">
            审批意见：
          </div>
          <div class="determine-text">
            <textarea class="remark-text" v-model="determineResult"/>
          </div>
        </div>

        <div class="approval-submit">
          <van-button block native-type="submit" @click="submitApproval">确认</van-button>
        </div>
      </div>
    </div>
</template>

<script>
import {Dialog} from "vant";

export default {
  name: "Approval",
  data() {
    return {
      radio: '',
      determineResult: '',
    }
  },
  props: {
    // 每次显示此页时清空搜索框
    isChangeRadio: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    submitApproval () {
		// 提交审批
      if(this.isChangeRadio){
      		  if (!this.radio) {
      		    Dialog.alert({
      		      title: "提示",
      		      message: "尚未选择审批结果，请重新填写"
      		    }).then(() => {})
      		    return;
      		  }
      		  this.$emit('submitApproval', {
      		    radio: this.radio,
      		    determineResult: this.determineResult,
      		  })
      }else{
      		  this.$emit('submitApproval', {
      		    
      		    determineResult: this.determineResult,
      		  })
      }
  }
},
}
</script>

<style lang="scss" scoped>
.approval-wrap {
  width: calc(100vw - #{px2vw(60)});
  padding: px2vh(60) px2vw(30) 0 px2vw(30);

  .approval-inner {
    width: 100%;
    .approval-result {
      width: 100%;
      display: flex;
      margin-bottom: px2vh(40);
      .result-title {
        span:nth-child(1) {
          color: red;
        }
      }
    }

    .approval-determine {
      width: 100%;
      margin-bottom: px2vh(80);
      .determine-title {
        width: 100%;
        margin-bottom: px2vh(40);
      }

      .determine-text {
        width: calc(100% - #{px2vw(111)});
        background-color: #FAFAFA;
        padding: px2vh(41) px2vw(56) px2vh(77) px2vw(55);
        border-radius: px2vw(20);
        .remark-text {
          height: px2vh(160);
        }
      }
    }

    .approval-submit {
      width: 100%;
      margin-bottom: px2vh(40);
      /deep/ .van-button {
        height: px2vh(120);
        color: #fff;
        background-color: #417ADC;
        border: 1px solid #417ADC;
        border-radius: px2vh(60);
        width: calc(100% - #{px2vw(4)});
      }
    }
  }
}
</style>
